<template>
  <div class='container'>
    <el-card>
      <el-form
        ref="form"
        label-width="80px"
      >
        <el-form-item
          prop="title"
          label="学科名称"
        >
          <el-input
            style="width: 200px;"
            class="filter-item"
            v-model="queryInfo.subjectName"
          ></el-input>
          <el-button
            size="small"
            class="filter-item"
            style="margin-left:10px"
            @click="clear"
          >清除</el-button>
          <el-button
            size="small"
            type="primary"
            icon="el-icon-search"
            class="filter-item"
            @click="getSubjectsList"
          >{{$t('table.search')}}</el-button>
          <el-button
            class="filter-item fr"
            size="small"
            style="margin-left: 10px;"
            type="success"
            icon="el-icon-edit"
            @click=" addDialogVisible=true"
          >新增学科</el-button>
        </el-form-item>
      </el-form>
      <el-alert
        v-if="alertText !== ''"
        :title="alertText"
        type="info"
        class="alert"
        show-icon
      ></el-alert>

      <el-table
        :data="subjectslist"
        style="width: 100%"
        height="650"
      >
        <el-table-column
          fixed
          type="index"
          label="序号"
          width="50"
        >
        </el-table-column>
        <el-table-column
          prop="subjectName"
          label="学科名称"
          width="120"
        >
        </el-table-column>
        <el-table-column
          prop="username"
          label="创建者"
          width="120"
        >
        </el-table-column>
        <el-table-column
          prop="addDate"
          label="创建日期"
          width="300"
        >
          <template slot-scope="scope">
            <span>{{scope.row.addDate | parseTimeByString}}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="isFrontDisplay"
          label="前台是否显示"
          width="150"
        >
          <template slot-scope="scope">
            <div v-if="scope.row.isFrontDisplay ==1 ">是</div>
            <div v-else>否</div>
          </template>
        </el-table-column>
        <el-table-column
          prop="twoLevelDirectory"
          label="二级目录"
          width="120"
        >
        </el-table-column>
        <el-table-column
          prop="tags"
          label="标签"
          width="120"
        >
        </el-table-column>
        <el-table-column
          prop="totals"
          label="题目数量"
          width="120"
        >
        </el-table-column>
        <el-table-column
          prop=""
          label="操作"
          width="300"
        >
          <template slot-scope="scope">
            <el-button
              type="text"
              @click="jumpDirectorys(scope.row)"
            >学科分类</el-button>
            <el-button
              type="text"
              @click="jumpTags(scope.row)"
            >学科标签</el-button>
            <el-button
              type="text"
              @click="showEditDialog(scope.row)"
            >修改</el-button>
            <el-button
              type="text"
              @click="removeSubjects(scope.row.id)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryInfo.page"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="queryInfo.pagesize"
        layout=" prev, pager, next, sizes,jumper"
        :total="total"
        background
        style="margin: 15px 5px 15px 0"
        class="filter-item fr"
      >
      </el-pagination>
    </el-card>
    <!--添加用户 -->
    <el-dialog
      title="新增学科"
      :visible.sync="addDialogVisible"
      width="40%"
      @close="addDialogClosed"
    >
      <!-- 对话框主体区域 -->
      <el-form
        :model="addForm"
        :rules="addFormRules"
        ref="addFormRef"
        label-width="90px"
      >
        <el-form-item
          label="学科名称"
          prop="subjectName"
        >
          <el-input
            v-model="addForm.subjectName"
            type="text"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="是否隐藏"
          prop="isFrontDisplay"
        >
          <el-switch
            v-model="addForm.isFrontDisplay"
            active-color="#13ce66"
            inactive-color="#ff4949"
          >
          </el-switch>
        </el-form-item>
      </el-form>
      <!-- 对话框底部区域 -->
      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="addDialogVisible = false">取 消</el-button>
        <el-button
          type="primary"
          @click="addUser"
        >确 定</el-button>
      </span>
    </el-dialog>
    <!-- 修改用户对话框 -->
    <!--修改用户 -->
    <el-dialog
      title="修改学科"
      :visible.sync="editDialogVisible"
      width="40%"
      @close="editDialogClosed"
    >
      <!-- 对话框主体区域 -->
      <el-form
        :model="editForm"
        :rules="editFormRules"
        ref="editFormRef"
        label-width="90px"
      >
        <el-form-item
          label="学科名称"
          prop="subjectName"
        >
          <el-input
            v-model="editForm.subjectName"
            type="text"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="是否隐藏"
          prop="isFrontDisplay"
        >
          <el-switch
            v-model="editForm.isFrontDisplay"
            active-color="#13ce66"
            inactive-color="#ff4949"
          >
          </el-switch>
        </el-form-item>
      </el-form>
      <!-- 对话框底部区域 -->
      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="editDialogVisible= false">取 消</el-button>
        <el-button
          type="primary"
          @click="editUserInfo"
        >确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { list, add, update, remove } from '@/api/hmmm/subjects'
export default {
  name: '',
  components: {},
  props: {},
  data() {
    return {
      // 查询参数对象
      queryInfo: {
        subjectName: '',
        page: 1,
        pagesize: 10
      },
      subjectslist: [], // 获取列表
      total: 0,
      alertText: '',
      // 控制添加对话框的显示与隐藏
      addDialogVisible: false,
      // 控制修改用户对话框的显示与隐藏
      editDialogVisible: false,
      // 添加表单用户数据
      addForm: {
        subjectName: '', // 学科名称
        isFrontDisplay: true // 是否在页面显示 1是 0否

      },
      // 表单的验证规则对象
      addFormRules: {
        subjectName: [
          { required: true, message: '请输入学科名', trigger: 'blur' }
          // {
          //   min: 3,
          //   max: 10,
          //   message: '用户名的长度在3~10个字符之间',
          //   trigger: 'addFormRulesblur'
          // }
        ],
        isFrontDisplay: [
          { required: true, message: '请选择是否显示', trigger: 'blur' }
        ]
      },
      // 查询到的用户信息对象
      editForm: {
        id: '',
        subjectName: '',
        isFrontDisplay: true

      },
      // 修改表单的验证对象规则
      editFormRules: {
        subjectName: [
          { required: true, message: '请输入学科名', trigger: 'blur' }
          // {
          //   min: 3,
          //   max: 10,
          //   message: '用户名的长度在3~10个字符之间',
          //   trigger: 'addFormRulesblur'
          // }
        ],
        isFrontDisplay: [
          { required: true, message: '请选择是否显示', trigger: 'blur' }
        ]
      }

    }
  },
  computed: {

  },
  watch: {},
  created() {
    this.getSubjectsList()
  },
  mounted() { },
  methods: {
    // 获取列表
    async getSubjectsList() {
      const { data } = await list(this.queryInfo)
      console.log(data)
      this.subjectslist = data.items
      this.total = data.counts
      this.alertText = `共 ${this.total} 条记录`
    },
    handleSizeChange(newSize) {
      this.queryInfo.pagesize = newSize
      this.getSubjectsList()
    },
    handleCurrentChange(newPage) {
      this.queryInfo.page = newPage
      this.getSubjectsList()
    },
    clear() {
      this.queryInfo.subjectName = ''
      this.getSubjectsList()
    },
    // 监听添加用户对话框关闭
    addDialogClosed() {
      this.$refs.addFormRef.resetFields()
    },
    // 点击按钮,添加新用户
    addUser() {
      this.$refs.addFormRef.validate(async valid => {
        // console.log(valid)
        if (!valid) return
        try {
          // 发起修改用户信息的数据请求
          const { data } = await add(this.addForm)
          this.$message.success('添加角色成功!')
          // 隐藏添加用户的对话框
          this.addDialogVisible = false
          // 重新获取用户列表数据
          this.getSubjectsList()
        } catch (error) {
          console.error(error)
        }
      })
    },
    // 展示编辑用户的对话框
    async showEditDialog(row) {
      // console.log(row)
      this.editForm.id = row.id
      this.editForm.subjectName = row.subjectName
      this.editForm.isFrontDisplay = row.isFrontDisplay === 1
      this.editDialogVisible = true
    },
    // 监听用户对话框的关闭事件
    editDialogClosed() {
      this.$refs.editFormRef.resetFields()
    },
    // 修改用户信息并提交
    editUserInfo() {
      this.$refs.editFormRef.validate(async valid => {
        // console.log(valid)
        if (!valid) return
        try {
          // 发起修改用户信息的数据请求
          const { data } = await update(this.editForm)
          this.$message.success('修改角色成功!')
          // 隐藏添加用户的对话框
          this.editDialogVisible = false
          // 重新获取用户列表数据
          this.getSubjectsList()
        } catch (error) {
          console.error(error)
        }
      })
    },
    // 根据id删除对应学科
    async removeSubjects(id) {
      // 弹框询问用户是否删除数据
      const confirmResult = await this.$confirm('请问是否要永久删除该学科', '删除提示', {
        confirmButtonText: '确认删除',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => err)

      // 如果用户确认删除 则返回值为字符串 confirm
      // 如果用户取消的了删除,则返回值为字符串 cancel
      if (confirmResult !== 'confirm') {
        return this.$message.info('已经取消删除')
      }

      try {
        // 发起修改用户信息的数据请求
        const { data } = await remove({ id })
        this.$message.success('删除角色成功!')
        // 重新获取用户列表数据
        this.getSubjectsList()
      } catch (error) {
        console.error(error)
      }
    },
    // 跳转学科分类
    jumpDirectorys(row) {
      console.log(row)
      this.$router.push(`/subjects/directorys?id=${row.id}&name=${row.subjectName}`)
    },
    // 跳转学科标签
    jumpTags(row) {
      this.$router.push(`/subjects/tags?id=${row.id}&name=${row.subjectName}`)
    }

  }

}
</script>

<style lang="less" scoped>
</style>
